<template>
  <v-card
          max-width="400"
          class="mx-auto"
  >


    <v-container>
      <v-row dense>
        <v-col cols="12">
          <a href="http://www.blogry.cn/blogs/4"><v-card
                  color="#385F73"
                  dark
          >
            <v-card-title class="text-h5">
              我的编程经历
            </v-card-title>

            <v-card-subtitle>编程 - 它改变了我的生活，让我从一个网瘾少年转变成为一个有梦想的开发者...</v-card-subtitle>

            <v-card-actions>
              <v-btn text>
                <a href="http://www.blogry.cn">Go to my blog</a>
              </v-btn>
            </v-card-actions>
          </v-card></a>
        </v-col>

        <v-col
                v-for="(item, i) in items"
                :key="i"
                cols="12"
        >
         <v-card
                  :color="item.color"
                  dark
          >
           <a :href="item.href"><div class="d-flex flex-no-wrap justify-space-between">
              <div>
                <v-card-title
                        class="text-h5"
                        v-text="item.title"
                ></v-card-title>

                <v-card-subtitle v-html="item.description"></v-card-subtitle>

                <v-card-actions>

                </v-card-actions>
              </div>

              <v-avatar
                      class="ma-3"
                      size="125"
                      tile
              >
                <v-img class="img-radios" :src="item.firstpicture"></v-img>
              </v-avatar>
            </div></a>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <br>
    <br>
    <br>
  </v-card>
</template>

<script>

  import {getRecommendData} from '../../../../network/word'

  export default {
    name: "Recommend",
    data: () => ({
      items: [],
    }),
    created(){
      getRecommendData(0,99).then(res => {
        this.items = res.data.recommends

      })
    }
  }
</script>

<style scoped>
  .img-radios{
    -webkit-border-radius: 5px!important;
    -moz-border-radius: 5px!important;
    border-radius: 5px!important;
  }

  a{
    text-decoration: none;
    color: white!important;
    color: black;
  }

</style>